// components/scroll-tab-view/index.js
Component({
  options:{
    multipleSlots:true   //这样就可以设置多个slot插槽
  },
  /**
   * 组件的属性列表
   */
  properties: {
    // tab选项卡标签的配置列表
    tabs: {
      type: Array,
      value: []
    },
    currentIndex: { // 当前选中的tab index
      type: [Number, String],
      value: 0
    },
    tabWidth: { // 每个tab设置的宽度
      type: Number,
      value: 80
    },
    isRefresh: {// 当前下拉刷新状态
      type: Boolean,
      value: false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    scrollLeft: 0, // tab标题滚动条位置
  },

  /**
   * 组件的方法列表
   */
  methods: {
    changeTabs(e) {
      const currentIndex = e.currentTarget.dataset.current;
      this.triggerEvent('ChangeTab', {currentIndex});
      this.checkScrollBar(currentIndex);
    },
    // 切换视图
    switchTabView(e) {
      // console.log('switchTabView', e);
      const currentIndex = e.detail.current;
      this.triggerEvent('ChangeTab', { currentIndex });
      this.checkScrollBar(currentIndex);
    },

    // 设置滚动条位置
    checkScrollBar(currentIndex) {
      // 获取屏幕宽度
      const { screenWidth } = wx.getSystemInfoSync();
      // 计算出完全显示在屏幕区的tab个数
      const $num = parseInt(screenWidth / this.data.tabWidth);
      if(currentIndex + 1 > $num) {
        this.setData({
          scrollLeft: $num * this.data.tabWidth
        })
      } else {
        this.setData({
          scrollLeft: 0
        })
      }
    },

    // 触发下拉刷新
    onRefresh() {
      this.triggerEvent('refresh', {
        current: this.data.currentIndex,
      })
    }
  }
})

